<template>
  <view class="main">
    <image src="../static/logo.png" class="head-img"></image>
    <div class="info">
      <div class="shop-info">
        <div>
          xxxx解放东路xxx
        </div>
        <div class="distinct">
          距离999km
        </div>
      </div>
      <div class="option">

      </div>
    </div>
    <div class="body">
      <div class="nav">
        <view class="search">
          <u-search shape="square" :show-action="false"></u-search>
        </view>
        <view class="nav-list">
          <div>1</div>
          <div>2</div>
          <div>3</div>
          <div>4</div>
          <div>5</div>
          <div>6</div>
        </view>
      </div>
      <div class="show">
        <view>
          <scroll-view>
            <food-item src="../static/logo.png" value="18" name="baoChaoYaoHua"></food-item>
          </scroll-view>
        </view>
      </div>
    </div>
  </view>
</template>
<script setup>

import FoodItem from "../../components/order/food-item";
</script>

<style scoped lang="scss">
$head-img-height: 20% ;
$info-height: 10%;


.main {
  width: 100vw;
  height: 100vh;

  .body {
    height: calc(100% - $info-height - $head-img-height);

    display: flex;
    .nav{
      width: 20%;
      .nav-list{
        display: flex;
        flex-direction: column;
      }
    }
    .show{
      width: 80%;
    }
  }

  .head-img {
    width: 100%;
    height: $head-img-height;
    display: inline-block;

  }

  .info {
    height: $info-height;
    width: 100%;
    display: inline-block;


    .shop-info {
      display: block;
      width: 50%;

      .distinct {
        font-size: 0.5em;
        color: #6a6a6a;
        opacity: 0.8;
      }
    }
  }
}
</style>
